<template>
  <div id="app">
    <VisitRecord 
 
    :isShow="isShow" 
    :searchArr="searchArr"
    @isDetailShow="isDetailShow"
     @changeValue="changeValue"
    >
    </VisitRecord>

    <VisitDetails
    :isShow="isShow" 
    :detailObj="detailObj" 
    :list="list" 
    @checkStatus="checkStatus"
   
    ></VisitDetails>
  </div>
</template>

<script>
import VisitRecord from './components/VisitRecord.vue'
import VisitDetails from './components/VisitDetails.vue'
export default {

  components: {
    VisitRecord,
    VisitDetails
  },

  data() {
    return {
      isShow: false,
      list: [
        {id:'1001',time: '2020-12-12',name: '小明',result: '感冒',info: '感冒药' },
        {id:'1002',time: '2020-12-25',name: '小华',result: '发烧',info: '退烧药' },
        {id:'1003',time: '2020-12-09',name: '小张',result: '骨折',info: '万通筋骨贴' },
        {id:'1004',time: '2020-12-01',name: '小曲',result: '健康',info: '六味地黄丸' },
      ],
      detailObj: {},
      searchArr:[]
     
    }
  },

  created() {
    this.exchange()
  },

  methods: {

    //交换数组
    exchange() {
      this.list.forEach(element => {
          this.searchArr.push(element)
      })
    },
    checkStatus(value) {
      this.isShow = value
    },

    isDetailShow(value) {
      this.isShow = value.flag
      this.detailObj = this.list.filter(k=>k.id === value.id)[0]
    },

    changeValue(value) {
      if (value.trim().length <= 0) {
        this.searchArr = this.list
      } else {
        this.searchArr = this.list.filter(k => k.name.includes(value))
      }
    }
  }
 
}
</script>

<style>

</style>